import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Image,Radio } from 'antd';

import { getPurposeListFn } from '@/apis/advert';

interface DataItem {
  createBy: string;
  createDate: string;
  describes: string;
  enableState: number;
  fileUrl: string;
  id: string;
  imageUploadId: string;
  pagesSpaceTypes: string;
  pagesSpaceTypesName: string;
  purposeCode: string;
  purposeName: string;
  status: string;
  updateBy: string;
  updateDate: string;
}

export default function editPlan(props: any) {
  const [data, setData] = useState([]);
  const [ budget,setBudget ] = useState('unlimited') 

  useEffect(() => {
    getPurposeListFn(props.id).then((res: any) => {
      setData(res);
    });
  }, []);

  const purposeList = data.map((item: DataItem, index) => {
    return (
      <div
        className="f fjb"
        style={{
          border: '1px solid #ccc',
          marginRight: '20px',
          padding: '20px',
          borderRadius: '6px',
          width: '240px',
          cursor: 'not-allowed',
        }}
      >
        <div>
          <p>{item.purposeName}</p>
          <p>{item.pagesSpaceTypesName}</p>
        </div>
        <Image
          width={56}
          height={56}
          style={{ borderRadius: '50%' }}
          src={item.fileUrl}
        ></Image>
      </div>
    );
  });

  function onChange(e:any){
    setBudget(e.target.value);
  }

  return (
    <div>
      <div className="f">{purposeList}</div>
      <Form wrapperCol={{ span: 8 }}>
        <Form.Item label="推广计划日预算">
          <Radio.Group value={budget} onChange={onChange}>
            <Radio.Button value="unlimited">不限</Radio.Button>
            <Radio.Button value="limited">指定预算</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="推广计划名称">
          <Input placeholder="推广计划名称" />
        </Form.Item>
      </Form>
      <Button>确定</Button>
    </div>
  );
}
